# ClientOnly

This component renders children only in the client environment and renders the fallback on the server. You can set an appropriate fallback to enhance the user experience as needed.

`ClientOnly` is implemented using the [`useIsClient`](/docs/react/useIsClient) hook internally to detect the execution environment.

```tsx /ClientOnly/
import { ClientOnly } from '@suspensive/react'

const Example = () => (
  <ClientOnly fallback={<>Loading...</>}>
    <div>This will only be rendered on the client side.</div>
  </ClientOnly>
)
```

## ClientOnly.with

`ClientOnly.with` is a higher-order component (HOC) that wraps a component using `ClientOnly`.
`ClientOnly.with` makes it easy to wrap a component.

```tsx /ClientOnly.with/
import { ClientOnly } from '@suspensive/react'

const Example = ClientOnly.with({ fallback: <>server</> }, () => {
  return <>client</>
})
```
